<script setup lang="ts">
  import { getOrderListApi } from '@/api/order'
  import type { OrderItem } from '@/type/order'
  import { ref } from 'vue'

  interface Props {
    type: string
  }
  const props = defineProps<Props>()

  const current = ref(1)
  const status = ref<UniHelper.UniLoadMoreStatus>('loading')
  const totalPages = ref(3)
  const loading = ref(false)
  const list = ref<OrderItem[]>([])
  const getList = async () => {
    loading.value = true
    const res = await getOrderListApi({
      type: props.type,
      pageSize: '5',
      current: current.value.toString(),
    })
    list.value.push(...res.rows)
    totalPages.value = res.pageTotal
    loading.value = false
  }
  getList()

  // 跳回问诊室
  const onGoOn = (id: string) => {
    uni.navigateTo({
      url: `/subpkg_consult/room/room?orderId=${id}`,
    })
  }

  const onLoadMore = () => {
    if (loading.value) return
    if (current.value === totalPages.value) {
      status.value = 'noMore'
      return
    }
    current.value++
    getList()
  }
  // 下拉刷新
  const isReshing = ref(false)
  const onRefresh = async () => {
    isReshing.value = true
    // 重置数据
    current.value = 1
    list.value = []
    loading.value = false
    await getList()
    isReshing.value = false
  }
</script>

<!-- subpkg_consult/order_list/components/order-list.vue -->
<template>
  <scroll-view
    refresher-enabled
    refresher-background="#f6f6f6"
    class="uni-scroll-view"
    scroll-y
    @scrolltolower="onLoadMore"
    @refresherrefresh="onRefresh"
    :refresher-triggered="isReshing"
  >
    <view class="consult-list">
      <view v-for="order in list" :key="order.id" class="consult-list-item">
        <view class="consult-header">
          <view class="label">
            <image class="doctor-avatar" :src="order.docInfo?.avatar" />
            <text>{{ order.typeValue }}（自动分配医生）</text>
          </view>
          <text v-if="order.status === 1" class="status color-1">待支付</text>
          <text v-if="order.status === 2" class="status color-2">待接诊</text>
          <text v-if="order.status === 3" class="status color-2">咨询中</text>
          <text v-if="order.status === 4" class="status color-3">已完成</text>
          <text v-if="order.status === 5" class="status color-3">已取消</text>
        </view>
        <navigator
          class="consult-body"
          hover-class="none"
          :url="`/subpkg_consult/order_detail/index?id=${order.id}`"
        >
          <uni-list :border="false">
            <uni-list-item :border="false" title="病情描述" :right-text="order.illnessDesc" />
            <uni-list-item :border="false" title="价格" :right-text="'¥' + order.payment" />
            <uni-list-item :border="false" title="创建时间" :right-text="order.createTime" />
          </uni-list>
        </navigator>

        <view v-if="order.status === 1" class="consult-footer">
          <button class="uni-button minor">取消订单</button>
          <button class="uni-button">去支付</button>
        </view>
        <view v-if="order.status === 2" class="consult-footer">
          <button class="uni-button minor">取消订单</button>
          <button class="uni-button">继续咨询</button>
        </view>
        <view v-if="order.status === 3" class="consult-footer">
          <button class="uni-button" @click="onGoOn(order.id)">继续咨询</button>
        </view>
        <view v-if="order.status === 4" class="consult-footer">
          <button class="uni-button minor">问诊记录</button>
          <button v-if="order.evaluateId" class="uni-button minor">查看评价</button>
          <button v-else class="uni-button">去评价</button>
        </view>
        <view v-if="order.status === 5" class="consult-footer">
          <button class="uni-button minor">删除订单</button>
          <button class="uni-button">咨询其它医生</button>
        </view>
      </view>

      <!-- 加载状态 -->
      <uni-load-more
        :status="status"
        color="#C3C3C5"
        :icon-size="16"
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '数据正在加载中...',
          contentnomore: '没有更多数据了',
        }"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
